<template>
  <view class="orders">
    <view v-for="(item, index) in user_order_list" class="order" :key="item.id">
      <view class="info">
        <image
          class="preview"
          v-if="item.type === 1 && item.detail.product"
          :src="item.detail.product.thumb"
        ></image>
        <view class="message">
          <view class="name">{{ item.name }}</view>
          <view class="cost">
            <text>¥{{ item.amount }}</text>
            <text :class="['state', { unpay: +item.status === 1 }]">{{
              formatStatus(item.status)
            }}</text>
          </view>
          <view class="create-time"> 下单时间：{{ item.created_at }} </view>
        </view>
      </view>
      <Flex class="sn" justify="space-between">
        <text> 订单编号：{{ item.no }} </text>
        <t-button
          v-if="+item.status === 1"
          backgroundColor="#FF4949"
          width="160rpx"
          height="60rpx"
          margin="0"
          @click="onPayment(item)"
          >立即支付</t-button
        >
      </Flex>
    </view>
    <template v-if="!user_order_list.length">
      <uv-empty
        class="empty"
        marginTop="160rpx"
        text="暂无订单"
        width="160rpx"
        height="160rpx"
        icon="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/empty/null_empty.png"
      ></uv-empty>
      <t-button
        class="btn-order"
        width="220rpx"
        height="80rpx"
        backgroundColor="#333"
        margin="60rpx auto 0"
        @click="toOrder"
        >去下单</t-button
      >
    </template>
  </view>
</template>
<script>
import { interpreter } from "@/api/request";
import { orderList } from "@/api/shopApi/order";
import Head from "@/components/Head/head.vue";
import debounce from "@/utils/debounce";
import payment from "@/utils/payment";
const statusString = {
  1: "未支付",
  2: "支付成功",
  3: "订单完成",
  4: "超时未支付",
  5: "申请退款",
  6: "退款"
};
export default {
  components: {
    Head
  },
  data() {
    return {
      user_order_list: []
    };
  },
  async created() {
    this.getOrderList();
  },
  methods: {
    async getOrderList() {
      const [err, res] = await interpreter(orderList());
      if (!err) {
        this.user_order_list = res.data;
      }
    },
    onPayment: debounce(async function (item) {
      await payment(
        item.no,
        item.type === 2
          ? "/pages/mine/mine"
          : "/pages/shop/index/order_success",
        () => {
          this.getOrderList();
        }
      );
    }),
    toOrder() {
      uni.switchTab({
        url: "/pages/shop/index/index"
      });
    },
    toPay(item) {
      if (+item.status === 1) {
        uni.navigateTo({
          url: `/pages/tabbar/tabbar-shop/index/order_pay?order_id=${item.no}&count=${item.amount}`
        });
      }
    },
    formatStatus(status) {
      return statusString[status];
    },
    leftClick() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  padding: 8px 0;
  background-color: #f9f9f9;
}
.orders {
  .order {
    width: 84%;
    padding: 20rpx 4%;
    border-radius: 10rpx;
    background: #ffffff;
    margin: 0 auto 20px;
    .info {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
    }
    .preview {
      flex-shrink: 0;
      width: 80px;
      height: 80px;
      margin-right: 10px;
      border-radius: 20rpx;
    }
    .message {
      width: 100%;
      overflow: hidden;
    }
    .name {
      color: #333333;
      font-size: 14px;
      margin-bottom: 8px;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .create-time {
      font-size: 12px;
      color: #999999;
    }
    .cost {
      color: #ff4949;
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 8px;
      .state {
        padding: 2px 12px;
        border-radius: 15px;
        margin-left: 10px;
        font-size: 12px;
        background-color: #f3f3f3;
        color: #666666;
      }
      .unpay {
        background-color: #fdefec;
        color: #ff4949;
      }
    }
    .sn {
      color: #666666;
      font-size: 12px;
    }
  }
}
</style>
